<script setup lang="ts">
import { onShareAppMessage } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 定义消息列表数据结构
interface Message {
  id: number
  content: string
  isBot: boolean
}

// API配置
const API_URL = 'https://infer-modelarts-cn-east-4.modelarts-infer.com/v1/infers/937cabe5-d673-47f1-9e7c-2b4de0600431/v1/chat/completions'
const API_KEY = 'GVIt86f4e1y284IAst0CcP-YEglNUyOfPPSjUtHsA9pNky2BciRMWXsYF-5yi_ZeSi3GCAVs3y7GI83GO3wyhg' // 请替换成你的实际API Key
const API_MODEL = 'DeepSeek-R1-Distill-Qwen-32B'

// 消息列表
const messageList = ref<Message[]>([
  {
    id: 1,
    content: '你好！很高兴见到你。有什么我可以帮你的吗？无论是学习、工作还是生活中的问题，我都很乐意帮助你。',
    isBot: true
  }
])

// 输入框内容
const inputContent = ref('')

// loading状态
const loading = ref(false)

// 调用API发送消息
const callAPI = async (userMessage: string) => {
  try {
    loading.value = true
    
    const response = await uni.request({
      url: API_URL,
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      data: {
        model: API_MODEL,
        max_tokens: 1024,
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          { role: 'user', content: userMessage }
        ],
        stream: false,
        temperature: 1.0
      }
    })

    // 检查响应状态
    if (response.statusCode === 200 && response.data) {
      const responseData = response.data as any
      // 添加机器人回复
      messageList.value.push({
        id: messageList.value.length + 1,
        content: responseData.choices[0].message.content,
        isBot: true
      })
    } else {
      throw new Error('API调用失败')
    }
  } catch (error) {
    uni.showToast({
      title: '发送失败，请重试',
      icon: 'none'
    })
    console.error('API调用错误:', error)
  } finally {
    loading.value = false
  }
}

// 发送消息
const sendMessage = async () => {
  if (!inputContent.value.trim() || loading.value) return
  
  // 添加用户消息
  const userMessage = inputContent.value
  messageList.value.push({
    id: messageList.value.length + 1,
    content: userMessage,
    isBot: false
  })
  
  inputContent.value = ''
  
  // 调用API获取回复
  await callAPI(userMessage)
}

onShareAppMessage(()=>{
  return {
    title: 'DeepSeek',
    path: '/pages/index/index'
  }
})
</script>

<template>
  <view class="chat-container">
    <!-- 消息列表区域 -->
    <scroll-view 
      class="message-list"
      scroll-y
      scroll-with-animation
    >
      <view 
        v-for="msg in messageList" 
        :key="msg.id"
        class="message-item"
        :class="{ 'message-bot': msg.isBot }"
      >
        <view class="message-content">
          {{ msg.content }}
        </view>
      </view>
      <!-- Loading提示 -->
      <view v-if="loading" class="loading-tips">
        正在思考中...
      </view>
    </scroll-view>

    <!-- 底部输入区域 -->
    <view class="input-area">
      <input 
        type="text"
        v-model="inputContent"
        class="message-input"
        placeholder="请输入消息..."
        :disabled="loading"
        @confirm="sendMessage"
      />
      <button 
        class="send-btn"
        @tap="sendMessage"
        :disabled="loading"
      >
        发送
      </button>
    </view>
  </view>
</template>

<style lang="scss">
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80rpx);
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.message-list {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.message-item {
  margin-bottom: 20rpx;
  display: flex;
  justify-content: flex-end;

  .message-content {
    max-width: 70%;
    padding: 20rpx;
    border-radius: 20rpx;
    background-color: #95ec69;
    word-break: break-all;
  }
}

.message-bot {
  justify-content: flex-start;

  .message-content {
    background-color: #ffffff;
  }
}

.input-area {
  padding: 20rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #eee;
}

.message-input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.send-btn {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #07c160;
  color: #ffffff;
  border-radius: 40rpx;
  font-size: 28rpx;
}

// 添加新样式
.loading-tips {
  text-align: center;
  color: #999;
  padding: 20rpx 0;
  font-size: 28rpx;
}

.send-btn:disabled {
  opacity: 0.6;
}
</style>